<template>
	<div>
		<Header></Header>
		<div class="content">
			<el-row v-loading="loading">
				<h2 class="title">{{$t('header.videoConference')}}</h2>
				<!--查询条件-->
				<el-row class="search-form-row">
					<el-form :inline="true" class="demo-form-inline">
						<!--查询条件：设备名称-->
						<el-form-item :label="$t('persons.company')" label-width="100px">
							<el-select v-model="belongCompany" style="width: 90%;" @change="query(1)">
								<el-option v-for="co in subCompanyList" :key="co.id" :label="co.companyName" :value="co.id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('video.deviceName')" label-width="100px">
							<el-input type="text" v-model="guid"></el-input>
						</el-form-item>
						<!--查询条件：绑定用户-->
						<el-form-item :label="$t('video.user')" label-width="100px">
							<el-select v-model="queryUserId" style="width: 90%;">
								<el-option v-for="u in userSelections" :key="u.key" :label="formatValue(u.value)" :value="u.key"></el-option>
							</el-select>
						</el-form-item>
						<!--查询按钮-->
						<el-form-item>
							<el-button type="primary" @click="query(1)">{{$t('standard.query')}}</el-button>
						</el-form-item>
					</el-form>
				</el-row>
				<!--结果列表-->
				<el-row>
					<div v-if="deviceData.length == 0" class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>
					<el-row v-for="item in deviceData" :key="item.id" class="device-row" v-on:mouseover.native="over($event)"
					 v-on:mouseout.native="out($event)">
						<img src="../../assets/device-icon.png" style="float: left; margin-left: 50px;margin-top: 30px;" />
						<div style="width: auto; margin-left: 10px;float: left;margin-top: 55px;">
							<p style="margin: 3px;">
								<span>{{$t('video.deviceName')}}{{item.guid}}</span>
								<span style="margin-left: 30px">{{$t('video.user')}}{{item.userName}}</span>
								<span style="margin-left: 30px">{{$t('persons.company')}}<span v-html="getCompanyName(item.companyId)"></span></span>
							</p>
						</div>
						<div style="width: auto; margin-left: 10px;float: right;margin-top: 50px; margin-right: 50px;">
							<el-button style="background-color: #34acff;border-color: #34acff;color: #fff;" @click="activateDevice(item)"
							 v-show="item.status === '2'">{{$t('standard.activate')}}</el-button>
							<el-button class="el-button--success" @click="showAllTypesDevice(item)" v-show="item.status === '1'">{{$t('standard.activated')}}</el-button>
						</div>
					</el-row>
				</el-row>
				<!--分页查询-->
				<el-row style="text-align: right;margin-top: 10px">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.currentPage"
					 :page-sizes="[10, 20, 50]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalNum">
					</el-pagination>
				</el-row>
				<!--所有类型设备使用详情-->
				<el-dialog :title="formTitle" :visible.sync="addFormVisible" :show-close="false" v-loading="detailLoading">
					<el-table :data="allTypesDeviceList">
						<el-table-column prop="guid" :label="$t('video.deviceName1')"></el-table-column>
						<el-table-column prop="userName" :label="$t('video.user1')"></el-table-column>
						<el-table-column prop="spendTime" :label="$t('video.userTime1')" :formatter="formatSpendTime"></el-table-column>
						<el-table-column prop="zwanNumber" :label="$t('video.zwNumber1')"></el-table-column>
						<el-table-column prop="zwanPassword" :label="$t('video.zwPassword1')"></el-table-column>
						<el-table-column prop="plantformId" :label="$t('video.platform1')" :formatter="formatPlantform"></el-table-column>
					</el-table>
					<span slot="footer" class="dialog-footer">
						<el-button @click="addFormVisible = false">{{$t('standard.close')}}</el-button>
					</span>
				</el-dialog>
			</el-row>
		</div>
	</div>
</template>

<script>
	import videoConference from './videoConference'

	export default videoConference;
</script>

<style scoped>
	.content {
		margin: 60px 50px 0 50px;
	}

	.title {
		text-align: left;
	}

	.device-row {
		height: 140px;
		text-align: left;
		cursor: pointer;
		/*background: url(../../../assets/device-bg.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;*/
	}

	.device-on {
		background-image: url(../../assets/device-bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
</style>
